<template>
  <div class="find">
     <div class="header">
      <!-- 左侧返回 -->
      <div class="is-left">
        <a-icon type="left" @click="$router.back()" />
      </div>
      <!-- 右侧的输入框 -->
      <div>
        <a-input-search placeholder="搜索" style="width: 300px" v-model="search_val" />
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="tab">
      <ul class="ul">
        <li @click="changeTab(index)" :class="{'active': tabIndex == index }" v-for="(item,index) in Tablist" :key="index">
          {{item.name}}
        </li>
      </ul>
    </div>
    <v-touch @swipeleft='left' @swiperight='right'>
			<div class="tablBox" v-if="tabIndex == 0">
				<!-- 视频区 -->
           <div class="videos" v-for="(item, index) in videolist" :key="index">
             <div class="title">{{item.title}}</div>
            <video :src="item.video" controls="controls" autoplay="autoplay" class="video1">
              <!-- <source :src="item.video"> -->
            </video>
            <div class="user">
               <div class="user_img"><img :src="item.img" alt=""></div>
               <span class="user_name">{{item.name}}</span>
               <span>
                 <van-icon class="van" name="like-o" size="20" />
                 <!-- <span class="user_count">{{item.commend}}</span> -->
                 <van-icon class="van" name="chat-o" size="20" @click="showPopup" />
                  <van-popup v-model="show" position="bottom">
                    <a-list
                      class="comment-list"
                     :header="`${data.length} 评论`"
                     item-layout="horizontal"
                     :data-source="data"
                    >
                    <a-list-item slot="renderItem" slot-scope="item, index">
                    <a-comment :author="item.author" :avatar="item.avatar">
                    <p slot="content"> {{ item.content }} </p>
                    <a-tooltip slot="datetime" :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')" >
                    <span>{{ item.datetime.fromNow() }}</span>
                    </a-tooltip>
                   </a-comment>
                  </a-list-item>
                  </a-list>
                 </van-popup>
                 <van-icon class="van" name="share-o" size="20"  @click="showShare = true" />
                 <van-share-sheet
                   v-model="showShare"
                   title="立即分享给好友"
                   :options="options"
                   @select="onSelect"
                  />
               </span>
            </div>
           </div>
			</div>
			<div class="tablBox" v-if="tabIndex == 1">
				<!-- 视频区 -->
           <div class="videos" v-for="(item, index) in list" :key="index">
             <div class="title">{{item.title}}</div>
            <video :src="item.video" controls="controls" autoplay="autoplay" class="video1">
              <!-- <source :src="item.video"> -->
            </video>
            <div class="user">
               <div class="user_img"><img :src="item.img" alt=""></div>
               <span class="user_name">{{item.name}}</span>
               <span>
                 <van-icon class="van" name="like-o" size="20" />
                 <!-- <span class="user_count">{{item.commend}}</span> -->
                 <van-icon class="van" name="chat-o" size="20"  />
                 <van-icon class="van" name="share-o" size="20"  @click="showShare = true" />
                 <van-share-sheet
                   v-model="showShare"
                   title="立即分享给好友"
                   :options="options"
                   @select="onSelect"
                  />
               </span>
            </div>
           </div>
			</div>
			<div class="tablBox" v-if="tabIndex == 2">
				<!-- 视频区 -->
           <div class="videos" v-for="(item, index) in list" :key="index">
             <div class="title">{{item.title}}</div>
            <video :src="item.video" controls="controls" autoplay="autoplay" class="video1">
              <!-- <source :src="item.video"> -->
            </video>
            <div class="user">
               <div class="user_img"><img :src="item.img" alt=""></div>
               <span class="user_name">{{item.name}}</span>
               <span>
                 <van-icon class="van" name="like-o" size="20" />
                 <!-- <span class="user_count">{{item.commend}}</span> -->
                 <van-icon class="van" name="chat-o" size="20"  />
                 <van-icon class="van" name="share-o" size="20"  @click="showShare = true" />
                 <van-share-sheet
                   v-model="showShare"
                   title="立即分享给好友"
                   :options="options"
                   @select="onSelect"
                  />
               </span>
            </div>
           </div>
			</div>
			<div class="tablBox" v-if="tabIndex == 3">
				<!-- 视频区 -->
           <div class="videos" v-for="(item, index) in list" :key="index">
             <div class="title">{{item.title}}</div>
            <video :src="item.video" controls="controls" autoplay="autoplay" class="video1">
              <!-- <source :src="item.video"> -->
            </video>
            <div class="user">
               <div class="user_img"><img :src="item.img" alt=""></div>
               <span class="user_name">{{item.name}}</span>
               <span>
                 <van-icon class="van" name="like-o" size="20" />
                 <!-- <span class="user_count">{{item.commend}}</span> -->
                 <van-icon class="van" name="chat-o" size="20"  />
                 <van-icon class="van" name="share-o" size="20"  @click="showShare = true" />
                 <van-share-sheet
                   v-model="showShare"
                   title="立即分享给好友"
                   :options="options"
                   @select="onSelect"
                  />
               </span>
            </div>
           </div>
			</div>
      <div class="tablBox" v-if="tabIndex == 4">
				<!-- 视频区 -->
           <div class="videos" v-for="(item, index) in list" :key="index">
             <div class="title">{{item.title}}</div>
            <video :src="item.video" controls="controls" autoplay="autoplay" class="video1">
              <!-- <source :src="item.video"> -->
            </video>
            <div class="user">
               <div class="user_img"><img :src="item.img" alt=""></div>
               <span class="user_name">{{item.name}}</span>
               <span>
                 <van-icon class="van" name="like-o" size="20" />
                 <!-- <span class="user_count">{{item.commend}}</span> -->
                 <van-icon class="van" name="chat-o" size="20"  />
                 <van-icon class="van" name="share-o" size="20"  @click="showShare = true" />
                 <van-share-sheet
                   v-model="showShare"
                   title="立即分享给好友"
                   :options="options"
                   @select="onSelect"
                  />
               </span>
            </div>
           </div>
			</div>
      <div class="tablBox" v-if="tabIndex == 5">
				<!-- 视频区 -->
           <div class="videos" v-for="(item, index) in list" :key="index">
             <div class="title">{{item.title}}</div>
            <video :src="item.video" controls="controls" autoplay="autoplay" class="video1">
              <!-- <source :src="item.video"> -->
            </video>
            <div class="user">
               <div class="user_img"><img :src="item.img" alt=""></div>
               <span class="user_name">{{item.name}}</span>
               <span>
                 <van-icon class="van" name="like-o" size="20" />
                 <!-- <span class="user_count">{{item.commend}}</span> -->
                 <van-icon class="van" name="chat-o" size="20"  />
                 <van-icon class="van" name="share-o" size="20"  @click="showShare = true" />
                 <van-share-sheet
                   v-model="showShare"
                   title="立即分享给好友"
                   :options="options"
                   @select="onSelect"
                  />
               </span>
            </div>
           </div>
			</div>
      <div class="tablBox" v-if="tabIndex == 6">
				<!-- 视频区 -->
           <div class="videos" v-for="(item, index) in list" :key="index">
             <div class="title">{{item.title}}</div>
            <video :src="item.video" controls="controls" autoplay="autoplay" class="video1">
              <!-- <source :src="item.video"> -->
            </video>
            <div class="user">
               <div class="user_img"><img :src="item.img" alt=""></div>
               <span class="user_name">{{item.name}}</span>
               <span>
                 <van-icon class="van" name="like-o" size="20" />
                 <!-- <span class="user_count">{{item.commend}}</span> -->
                 <van-icon class="van" name="chat-o" size="20"  />
                 <van-icon class="van" name="share-o" size="20"  @click="showShare = true" />
                 <van-share-sheet
                   v-model="showShare"
                   title="立即分享给好友"
                   :options="options"
                   @select="onSelect"
                  />
               </span>
            </div>
           </div>
			</div>
		</v-touch>
  </div>
</template>

<script>
import moment from "moment";
import { Toast } from 'vant';
export default {
  data() {
    return {
        search_val:"",//搜索框的值
        tabIndex:0,//当前的tab索引值
        tab:['1','2','3','4','5','6','7'],//页面编号
        list:[],//数据
        Tablist:[{
            name:"美食生活"
          },{
            name:"环球热点"
          },{
            name:"鬼畜剧场"
          },{
            name:"影音智能"
          },{
            name:"电子竞技"
          },{
            name:"科学科普"
          },{
            name:"社会延伸"
          }
        ],
        show: false,
        data: [{
          author: "饕鬄",
          avatar:
            "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
          content:
            "饔子左右挥双刀，脍飞金盘白雪高。徐州秃尾不足忆，汉阴槎头远遁逃。鲂鱼肥美知第一，既饱欢娱亦萧瑟。",
          datetime: moment().subtract(1, "days"),
        }],
        moment,
        showShare: false,
        options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    }
  },
  computed:{
    videolist(){
     return  this.$store.getters.videolist;
    }
  },
  watch:{
    tabIndex(){
       this.$http
      .get("/work/box-horse/videolist.php", {
          params: {
            type: this.tabIndex,
          }, 
        })
      .then((res) => {
        this.list=res.data.data;
        console.log(this.list);
      })
      .catch((err) => {});
    }
  },
  methods: {
     changeTab(index){
      console.log(index);
      this.tabIndex = index;
    },
    left(){
      console.log('left');
			this.tabIndex+=1;
			if (this.tabIndex > (this.tab.length -1)) {
				this.tabIndex = 0;
			}
			
		},
		right(){
      console.log('right');
			this.tabIndex-=1;
			if (this.tabIndex < 0) {
				this.tabIndex = (this.tab.length -1);
			}
		},
    showPopup() {
      this.show = true;
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
  mounted() {
    this.$http
      .get("/work/box-horse/videolist.php", {
          params: {
            type: this.tabIndex,
          }, 
        })
      .then((res) => {
        console.log(res);
        this.$store.dispatch("todovideolist",res.data.data)
      })
      .catch((err) => {});
  },
}

</script>
<style lang="scss" scoped>
.find{
  height: 100%;
  //头部样式
  .header {
  width: 100%;
  height: 4rem;
  background: $module-color;
  padding: $common-padding;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  i {
    margin-right: $common-margin;
  }
  }
  //导航栏样式
  .ul {
  background-color: white;
  width: 100%;
  height: 40px;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: auto;
  //在ios上滚动圆滑
  -webkit-overflow-scrolling : touch;
  white-space: nowrap;
  position: relative;
  padding: 0rem 0.8rem;
  box-sizing: border-box;
  border-bottom: 5px solid $app-bg-color
}
.ul li {
  width: auto;
  height: 100%;
  line-height: 2.9rem;
  margin-right: 0.5rem;
  display: inline-block;
  position: relative;
}
.active{
  color:$starbucks-color;
}
//实体样式
.tablBox{
 background-color: white;
  .title{
    max-height: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
		overflow: hidden;
  }
  .videos{
    .video1{
     width: 350px;
     margin-left: 10px;
    }
  }
  .user{
    display: flex;
		align-items: center;
		border-bottom: 5px solid rgba($color: #ccc, $alpha: 0.3);
    .user_img{
      width: 80upx;
			height: 80upx;
      img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .user_name{
      padding-left: 20px;
			font-weight: bold;
			flex-grow: 1;
    }
  }
}

.van{
  margin-right: 20px;
}
}
</style>